(function (fruit, ui, position, util, dom) {


    ui.define('fruit.ui.TooltipDialog', fruit.ui.Tooltip, {
        view: function () {
            var body = this.$("body");
            body.content = [
                {
                    name: 'header',
                    props: {
                        'class': 'f-tooltip-dialog-header'
                    },
                    content: [
                        {
                            region: true,
                            name: "actions",
                            props: {
                                'class': 'f-tooltip-dialog-header-actions'
                            },
                            content: [
                                {
                                    name: 'close',
                                    tag: 'i',
                                    props: {
                                        'class': 'icon-core-close-button-x22-dark f-tooltip-dialog-header-close'
                                    },
                                    events: {
                                        "click": "{#close}"
                                    }
                                },
                                {
                                    content: '{#headerActions}'
                                }
                            ]
                        },
                        {
                            region: true,
                            name: "title",
                            tag: 'span',
                            props: {
                                'class': 'f-tooltip-dialog-header-text'
                            },
                            content: '{#title}'
                        }
                    ]
                },
                {
                    region: true,
                    name: 'content',
                    props: {
                        'class': 'f-tooltip-dialog-content'
                    },
                    content: '{#content}'
                }
            ]
        },
        properties: {
            title: {
                value: null,
                observable: true
            },
            headerActions: {
                value: '',
                observable: true
            },
            content: {
                value: null,
                observable: true
            }
        },
        methods: {
            onInit: function () {
                this.inherited();
                //this._bindBaseEvents();
                this.addClass("f-tooltip-dialog");
            },
            _bindBaseEvents: function () {
                this.on("mouseenter", function () {
                    this.fire("mouseenter", this);
                }, this);
                this.on("mouseleave", function () {
                    this.fire("mouseleave", this);
                }, this);
            }
        }
    });
})(fruit, fruit.ui, fruit.position, fruit.util, fruit.dom);